<template>
    <view class="page">
        <accountHeader title="发起授权" jumpTo="/pages/smartKey/authorization"></accountHeader>
        <view class="page-top"></view>
        <view class="page-main">
            <u--form :model="form" :rules="rules" ref="formRef">
                <u-form-item prop="username">
                    <u--input class="input" v-model="form.username" border="none" placeholder="请输入车主账号"
                              prefixIcon="list" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
                </u-form-item>
                <u-form-item>
                    <u--input @click="show = true" class="input" v-model="form.date" border="none"
                              placeholder="输入时间" prefixIcon="list"
                              prefixIconStyle="font-size: 22px;color: #909399"></u--input>
                </u-form-item>
                <u-form-item prop="remark">
                    <u--input class="input" v-model="form.remark" border="none" placeholder="备注" prefixIcon="list"
                              prefixIconStyle="font-size: 22px;color: #909399"></u--input>
                </u-form-item>
                <u-form-item @click="selectShow = true">
                    <u--input class="input" v-model="form.keyId" border="none" placeholder="key id" prefixIcon="list"
                              prefixIconStyle="font-size: 22px;color: #909399"></u--input>
                </u-form-item>
            </u--form>
            <view>
                <u-picker :show="selectShow" :columns="selectColumns" @confirm="selectConfirm" @cancel="selectShow = false"></u-picker>
            </view>
            <view>
                <p>授权权限</p>
                <view style="display:flex; justify-content: start;">
                    <u-button :class="{active:form.switchLock}" class="btn type"
                              @click="changeSwitchLock(this.form.switchLock)">
                        锁
                    </u-button>
                    <u-button :class="{active:form.switchTrunk}" class="btn type"
                              @click="changeSwitchTrunk(this.form.switchTrunk)">
                        后备箱
                    </u-button>
                    <u-button :class="{active:form.switchingEngine}" class="btn type"
                              @click="changeSwitchingEngine(this.form.switchingEngine)">
                        发动机
                    </u-button>
                </view>
            </view>
            <u-button class="btn" @click="submit()">提交申请</u-button>

            <up-calendar startText="" endText="" :show="show" :mode="mode" @confirm="confirm"
                         @close="close"></up-calendar>
        </view>

        <u-toast ref="uToasts"></u-toast>
    </view>
</template>
<script>
	import accountHeader from "@/components/acountHeader.vue"
	import {getUserKeys} from "@/config/api/user.js"
	import {submitAuthorization} from "@/config/api/carKeys.js"
	export default{
		components:{
			accountHeader
		},
		data() {
			return{
				form: {
				    username: '',
				    date: '',
					// 发动机
				    switchingEngine: false,
				    // 后备箱
					switchTrunk: false,
					// 锁
				    switchLock: false,
				    remark: '',
				    keyId: '',
				},
				submitData: {
				    switchingEngine: 0,
				    switchTrunk: 0,
				    switchLock: 0,
					date: '',
					username: '',
					keyId:'',
					remark:'',
					expirationTime:'',
					startTime:'',
				},
				// 登录校验
				rules: {
				    username: [
				        {
				            required: true,
				            message: "请输入账号",
				            trigger: ['blur']
				        }
				    ],
					remark: [
						{
							required: false,
							message: "",
							trigger: ['blur']
						}
					]
				},
				show: false,
				mode: 'range',
				keyList: '',
				selectColumns: [],
				selectShow:false,
			}
		},
		methods:{
			changeSwitchingEngine() {
			    this.form.switchingEngine = !this.form.switchingEngine;
			    if (this.form.switchingEngine) {
			        this.submitData.switchingEngine = 1
			    } else {
			        this.submitData.switchingEngine = 0
			    }
			},
			
			changeSwitchTrunk() {
			    this.form.switchTrunk = !this.form.switchTrunk;
			    if (this.form.switchTrunk) {
			        this.submitData.switchTrunk = 1
			    } else {
			        this.submitData.switchTrunk = 0
			    }
			},
			
			changeSwitchLock() {
			    this.form.switchLock = !this.form.switchLock;
			    if (this.form.switchLock) {
			        this.submitData.switchLock = 1
			    } else {
			        this.submitData.switchLock = 0
			    }
			},
			
			getLists() {
			    getUserKeys().then((res) => {
			        this.keyList = res.rows;
			        let arr = [];
			        this.keyList.forEach((v) => {
			            arr.push(v.id);
			        });
			        this.selectColumns.push(arr);
			
			    })
			},
			
			submit() {
			    this.$refs.formRef.validate().then((res)=>{
			        if(!this.form.date){
			            this.$refs.uToasts.show({
			                message:"日期不能为空!"
			            });
			            return
			        }
			        if(!this.form.keyId){
			           this.$refs.uToasts.show({
			                message:"key id不能为空!"
			            });
			            return
			        }
			        this.submitData.switchingEngine=this.form.switchingEngine?1:0;
			        this.submitData.switchTrunk=this.form.switchTrunk?1:0;
			        this.submitData.switchLock=this.form.switchLock?1:0;
			        this.submitData.date=this.form.date
			        this.submitData.username=this.form.username
			        this.submitData.keyId=this.form.keyId
			        this.submitData.remark=this.form.remark
					
			        submitAuthorization(this.submitData).then((res)=>{
			            console.log(res);
			        });
					
			         this.$refs.uToasts.show({
			            message:"提交成功!"
			        })
					setTimeout(function(){
						uni.navigateBack()
					},3000)
			    }).catch((errors)=>{
			         this.$refs.uToasts.show({
			            message:"请按照提示输入"
			        })
			    })
			},
			
			selectConfirm(v){
				this.selectShow = false;
				this.form.keyId = v.value[0]
			},
			
			confirm(e){
			    this.form.date = e[0] + ' ~ ' + e[e.length - 1];
				this.submitData.expirationTime=e[0] +' 00:00:00';
				this.submitData.startTime=e[e.length - 1] + ' 00:00:00';
				this.show = false;
			},
			
			close(){
			    this.show = false;
			}
		},
		created(){
		    // 获取钥匙列表
		    this.getLists();
		}
		
	}
</script>

<style scoped>
	/* 页面 */
	.page{
		margin-top: 10%;
		padding:5%;
	}

    /* 页面头部 */
    .page-top {
        margin-top: 40px;
        display: flex;
        justify-content: center;
    }

    /* 输入框样式*/
    .input {
        border-bottom: 1px solid gray;
        border-radius: 0;
        margin: 10px 0;
    }

    /* 按钮样式 */
    .btn {
        text-align: center;
        margin-top: 15%;
        font-size: 40 rpx;
        padding: 50 rpx 0;
        color: white;
        background-color: #555555;
        border-radius: 100 rpx;
    }

    /* 灰色按钮样式 */
    .btn.type {
        font-size: 30 rpx;
        background-color: #6d6d6d;
        margin: 10px 5px;
    }

    .btn.type.active {
        background-color: #ffe78a;
    }
</style>
